<template>
    <div style="height: 100%">
            <!--放置图标-->
            <Menu name="logo" style="height:8%;display: flex;justify-content: center;align-items: center;width: 100%" theme="dark">
                <span class="ivu-avatar ivu-avatar-circle ivu-avatar-large">
                    <img src="../assets/images/logo.png">
                </span>
                <span style="color:white;font-weight: bolder;font-size: larger;margin-left: 6%">Aaron博客</span>
            </Menu>
        <!--水平方向导航栏-->
        <Menu mode="horizontal" theme="light" style="height: 8%;">
            <!--个人信息-->
            <MenuItem name="1" style="margin-left: 66%">
                <div @click="refresh">
                    <Icon type="md-refresh"/>
                    刷新
                </div>
            </MenuItem>
            <Submenu name="2">
                <template slot="title">
                   <span class="ivu-avatar ivu-avatar-circle ivu-avatar-image ivu-avatar-large">
                    <img :src="headPic">
                </span>
                    <span class="i-layout-header-user-name">{{nickname}}</span>
                </template>
                <MenuItem name="2-1">
                    <div @click="logout">退出</div>
                </MenuItem>
            </Submenu>
        </Menu>
        <!--主体部分-->
        <div style="background-color: #f5f7f9;height: 88%">
            <router-view/>
        </div>
        <!--底部-->
        <div style="height: 4%;display: flex;justify-content: center;align-items: center">
            <p>Copyright ©{{nowYear}} Aaron | 备案号：皖ICP备20006135号-1</p>
        </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        nowYear: 0,
        nickname: '',
        headPic: '',
        // 存放显示的tab标签
        tabs: []
      }
    },
    mounted() {
      this.nowYear = new Date().getFullYear()
      this.nickname = window.sessionStorage.getItem('nickname')
      this.headPic = window.sessionStorage.getItem('headpicture')
    },
    methods: {
      // 刷新
      refresh() {
        this.$router.push('/uindex')
      },
      // 退出登录
      logout() {
        window.sessionStorage.removeItem('lhamster_identity_info')
        window.sessionStorage.removeItem('headpicture')
        window.sessionStorage.removeItem('nickname')
        window.sessionStorage.removeItem('admin')
        // 跳转到登录页
        this.$router.push('/login')
      }
    }
  }
</script>

<style>
</style>
